<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.device_id" placeholder="GID" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.nickname" placeholder="渠道名称" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.device_version" placeholder="版本" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>
    <p><span class="title">设备数:</span><span>{{ total }}</span></p>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" class-name="status-col" width="200">
        <template slot-scope="{row}">
          {{ row.device_name }}
        </template>
      </el-table-column>
      <el-table-column label="渠道名称" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="包名" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.app_package }}</span>
        </template>
      </el-table-column>
      <el-table-column label="版本" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.device_version }}</span>
        </template>
      </el-table-column>
      <el-table-column label="IMEI" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.device_imei }}</span>
        </template>
      </el-table-column>
      <el-table-column label="GID" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.device_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" min-width="160" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <span>{{ row.gmt_datetime }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getChannelDevice"
    />

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getChannelDevice } from '@/api/channel'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Phonelist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      countPhone: { total: 999 },
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        sysLabel: ''
      },
      times: [],
      dialogFormVisible: false,
      dialogStatus: '',
      dialogPvVisible: false,
      pvData: [],
      downloadLoading: false,
      listLoading: false
    }
  },
  created() {
    this.getChannelDevice(this.listQuery)
  },
  methods: {
    // 获取用户列表
    async getChannelDevice(listQuery) {
      const res = await getChannelDevice(this.listQuery)
      this.tableData = res.data.data.deviceList.records
      this.total = res.data.data.deviceList.total
    },
    handleFilter() {
      this.listQuery.current = 1
      this.listQuery.deviceVersion = this.listQuery.device_version
      this.listQuery.channelName = this.listQuery.nickname
      this.listQuery.deviceId = this.listQuery.device_id
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.getChannelDevice(this.listQuery)
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  color:rgb(172, 176, 177);
}
.title{
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
